<template>
	<view class="p-item">
		<view class="p-img-box">
			<image src="https://tse4-mm.cn.bing.net/th/id/OIP-C.TUkeTnzawcsiD2PSuz3UnAHaE8?w=275&h=183&c=7&r=0&o=5&pid=1.7" mode="aspectFill" class="p-img" />
		</view>
		<view class="p-info flex">
			<view class="user align-center">
				<view class="user-info align-center">
					<image src="/static/logo.png" class="avatar"/>
					<view class="user-name"> 用户昵称用户昵称 </view>
				</view>
				<view class="time"> 2025-04-15 </view>
			</view>
			<view class="p-desc"> 
				<wd-text color="#999" :text="desc" :lines="3"/>
			</view>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps(['desc'])
</script>

<style lang="scss" scoped>
	.p-item {
		width: 100%;
		overflow: hidden;
		border-radius: 20rpx;
		box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
		.p-img-box {
			width: 100%;
			height: 0;
			padding-bottom: 150%;
			position: relative;
			.p-img {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
			}
		}
		.p-info {
			padding: 20rpx 10rpx;
			gap: 10rpx;
			flex-direction: column;
			.user {
				width: 100%;
				justify-content: space-between;
				.user-info {
					gap: 5rpx;
					flex: 1;
					.avatar {
						width: 50rpx;
						height: 50rpx;
						border-radius: 50%;
						border: 1px solid #f8f8f8;
					}
					.user-name {
						width: 140rpx;
						font-size: 24rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
				.time {
					color: #999;
					font-size: 20rpx;
					white-space: nowrap;
				}
			}
			.p-desc {
				color: #999;
			}
		}
	}
</style>